IXD 5106 - Fall 2023

WEEK THREE

TODAY’S

AGENDA

01.

02.

04.

PROTOTYPING

IXD DESIGN PATTERNS

IN CLASS ACTIVITY

& Designing for Mobile

03.

VISUAL DESIGN &INTERFACE ELEMENTS

Building designs for your target user

SAT/UNSAT #2 – COPYCAT

Design Principals & Characteristics

03

Wireframing, sometimes known as a "screen blueprint," is a way toprototype, test, and design systems (typically websites/apps) at astructural and skeletal level - while taking into account user needs.

It's a 2D design in the early stages of development meant tohelp create layouts, compositions and basic structure ofsomething before the visual design and content are added.

WIREFRAMING

01

WHEN & WHY DO YOU WIREFRAME?

The process takes place during the exploratory phase of the productlife cycle. Great for when you are:

• testing the scope of the product
• collaborating on ideas
• identifying businessrequirements.

Because they:

• Are User-focused Concepts
• Define Product Features
• Low Cost to Create

TYPES OF WIREFRAMES

• Low Fidelity

• Mid Fidelity

• High Fidelity

03

Prototyping is a scaled-down version of your product, a “sample version“that allows you to test your ideas and designs before investing more timeand money into full production of the product.

Prototypes help gain insight into the interactions users willtake and react to, identify flaws or usability issues early onand aid in making informed decisions about design, layoutand features of your designs.

PROTOTYPING

02

TYPES OF PROTOTYPES

• Low Fidelity

• Mid Fidelity

• High Fidelity

NOTE:

• Low + MidFidelity areoften linkedtogether

Visual design elements are fundamental to creating appealing andeffective visual compositions. They are combined and manipulated toconvey information, evoke emotions, establish brand identity, andguide the viewer's attention in a design.

Each element is critical in shaping a visual piece'soverall aesthetics and user experience.

VISUAL

DESIGN

ELEMENTS

GESTALTPRINCIPLES

TYPOGRAPHY

COLOUR

TUBIKSTUDIO.COM

– Wassily Kandinsky

“COLOUR IS A POWERWHICH DIRECTLYINFLUENCES THE SOUL.”

VISUALLY APPEALING UI

MOBILE UI

THINGS TO

LOOK OUT

FOR:

INTERACTIVE

ELEMENTS

BREAK TIME!

A button is a fundamental UI element that will heavily affect your interactiondesign. Buttons have the power to compel users to convert, to carry out anaction. Buttons are a middleman between the user and the product and arecharged with keeping the conversation between person and machine going.

BUTTONS

1. Make it look clickable
2. Make it easy to find and predict
3. Tell users what each button does. Don’t make them guess.
4. Size matters: have buttons people can actually click on
5. Don’t have a button for everything

RULES TO BUTTON DESIGN

Menus are lists of content categories or features, typically presented as a setof links or icons grouped together with visual styling distinct from the rest ofthe design.

MENUS

Navigation design is the discipline of creating,analyzing and implementing ways for users tonavigate through a website or app.

Navigation plays an integral role in how usersinteract with and use your products. It is howyour user can get from point A to point B andeven point C in the least frustrating waypossible.

NAVIGATION DESIGN

HAMBURGERMENUS

TABS

VERTICAL NAVIGATION MENUS

SLIDERS

Sliders are frequently used in user interfaces to allow users to pick a valueor range from a set of predefined options. In real-world usage, sliders canbe tricky to handle. This is especially true on touch-based interfaces,where achieving precise control to finely adjust a slider to a specific valueis often impractical.

CAROUSEL

Carousels allow multiple pieces ofcontent to occupy a single, covetedspace In other words, it is a slideshowof images or content that rotatesautomatically or with user interaction.Carousels are often used to showcasemultiple pieces of content within alimited space, such as on a website'shomepage or a product page.

WHEN ARE CAROUSELS USED?

1. Announcements of products/services
2. Testimonials
3. Onboarding

1. Prioritize content
2. Use clear navigation
3. Include image alt text
4. Avoid autoplay
5. Ensure keyboard accessibility

BEST PRACTICES FOR CAROUSELS

Variants allow you to create multiple versions of acomponent with different property values (e.g., text, colour,or layout) and switch between them easily. This can helpstreamline the design process and make it more efficient.

Variables allow us to create, store and use reusable valueslike text strings or colours throughout Figma. BUT! Variablescan only support one raw value - so you will still want touse styles when referencing multiple values at once.

VARIABLES

VARIABLE TYPES

Within Figma today, four types of variables are supported: colour,number, boolean, and string types.

Colour: refers to any variable that supports a colour definition, and this can beapplied to either the fill or stroke

Number: these are used to assign a numerical value to a variable definition.Once created, these types can be applied to text layers, corner radius values,min and max widths or heights, and padding or gap spacing values.

TYPES OF VARABLES CONT.

Boolean: allows us to assign booleans (true or false statements) to a variable withthe starting value as the default value when created.

Ex. Boolean variables allow for the control of layer visibility, such as the ability tochoose to display an image or container when within desktop-sized layouts but tohide it when designing for mobile.

String: allows for creating specific strings of characters to be made and usedthroughout components and within designs. This variable type can be applied toany text layer.

DESIGN SYSTEMS

It is the entire product ecosystem. A design system communicates the“what,” the “how,” and the “why.”

Style Guides: set the standards defining the elements' appearance and theoverall voice and tone. The visual language of look and feel.

Component Libraries: contain the building blocks of a product. They focus onhow assets should behave in the product.

DESIGN SYSTEM BENEFITS:

• Spend less time remaking components - increasing design outputsand focusing more time on solving problems.
• makes onboarding team members or working in groups easier toshare resources.
• makes it easier to communicate with developers and able totranslate designs into functional, accessible code
• a design matures, it provides a shared vision and language tocreate more consistent products - creating easier theming.
• Removes redundancy and creates more efficiency

IN CLASS ASSIGNMENT:

SAT/UNSAT - 5% - FIGMA COPYCAT

The purpose of this assignment is for you to explore Figma and learn its differentfeatures. This assignment will allow me to see how comfortable you are using Figmaand your strengths. You will recreate the provided landing page (available onBlackboard) in a wireframe and mid-fidelity format. If you feel confident enough, youcan even create a High-Fidelity Prototype of the landing page (this is not mandatory;this is simply if you want to take on the challenge). Please remember that you don’tneed to find the exact logo, images and fonts used in the example.

FirstName_LastName_IXD5106(Section Letter)_Assignment#

Due September 27 by 11:59 pm.

LETS JUMP

INTO FIGMA!

IXD 5106 - Fall 2023